<template>
  <div class="sup_add">
    <el-dialog
      :visible.sync="dialogVisible"
      @close="dialogVisibleClose"
      lock-scroll
      top="10vh"
      width="68%"
      height="65%"
    >
      <span
        slot="title"
        class="dialog_title"
      >{{  newData.id ? '客户物料编码编辑' : '客户物料编码新增' }}</span>
      <div
        class="dialog_div_new "
        
      >
      <!-- :style="{height: newData.id ? '70vh' : '70vh'}" -->
      <!-- 表格数据 -->
      <div class="basic_info">
      <div class="info_operation_btn">
        <div class="btn_left">
          <el-button
            v-if="buttonsPermissions.LuRu"
            type="primary"
            @click="onSubmit"
            accesskey="s"
            >保存(S)
          </el-button>
          <el-button v-else class="disabled_button" disabled>保存(S)</el-button>
          <el-button v-if="!isEdit"  @click="onNewOrder" class="del_btn"
            >删除
          </el-button>
        </div>
        <div class="btn_right">
          <i @click="onShowColumn()" class="set_up el-icon-s-tools" :size="20"></i>
        </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="table_content">
          <div>
            <NewTable
              ref="newTableRef"
              orderType="khwlbm"
              :TableConfig="TableConfig"
              :tableData="TableConfig.tableData"
              :tableDisabled="tableDisabled"
              :selectedRows="selectedRows"
              :isMask="false"
              :isRadio="true"
              :isDrag="true"
              :border="true"
              :isEdit="isEdit"
              @onHandleDrag="onDragColumn"
              @onCheckStorehouse="onCheckStorehouse"
              @onHandleUnit="onHandleUnit"
              @showDeleteTip="showDeleteTip"
            >
            </NewTable>
            <!-- @onDeleteRowPlus="onDeleteRowPlus" -->
          </div>
        </div>
      </div>
    </div>
    </div>
      </div>
    </el-dialog>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="getColumnList"
      :defaultColumnDataArr="defaultColumnData"
      orderType="客户物料编码新增"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 提醒弹框 -->
    <PopupReminder ref="reminderRef" :tipsData="tipsData" @onConfirm="onYes" @onCancel="onCancel"></PopupReminder>
    <!-- 操作日志 -->
    <DialogOperationLog :logTitle="logTitle" ref="operationLogRef"></DialogOperationLog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 删除提示
import PopupReminder from '@/views/components/popupReminder'
// 列配置
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogOperationLog from '@/views/components/dialogOperationLog'
import NewTable from '@/components/c_table/stockBillTable'
import { getAction, postAction, putAction, downPostFile } from '@/api/manage'
// 导入调用处理权限数据方法
import {
  handlePermissions,
  handleOtherPerms,
  sysConfig,
  formatMoney,
  formatPrice,
  formatFour,
  formatNumber,
  delcommafy,
  handleArrayToObject,
  handleObjectToArray,
  getBasicUnitId,
} from '@/utils/index'
import { getTimeYMD, getTime, getTimeHMS } from '@/utils/DateFormatter'
import { cloneObject } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { ACCESS_TOKEN, TENANT_ID, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'

export default {
  name: 'billInventoryOrder',
  components: {
    CConfiguration,
    DialogOperationLog,
    NewTable,
    PopupReminder,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['isSupplementOrder']),
    getColumnList() {
      return handleObjectToArray(this.TableConfig.columnData, 'props')
    },
    buttonsPermissions() {
      return handlePermissions('客户物料编码')
    },
  },
  created() {
    // 初始化数据
    this.init()
    this.reloadData()
    // 获取账套ID
    let accountBook = Vue.ls.get(ACCOUNT_BOOK)
    this.accountBookId = accountBook && accountBook.id
    this.billId = this.$route.params.billId
  },
  watch: {
   
  },
  data() {
    return {
      isRow:false,//删除 是否是单行
      isRowIndex:'',//删除 单行索引
      // 传递给弹框的数据
      tipsData: {
        tipsState:'',
        tipsWords:'',
        tipsMark: '',
      },
      dialogVisible: false,
      tableDisabled:false,
      form: {},
      // 账套ID
      accountBookId: '',
      storehouseId: '',
      // 传递给操作日志的值
      // logData: {
      // },
      logTitle: '',
      simpleMark: '',
      importValue: '导入',
      currentPage: 1, //默认开始页面
      showLiepeizhi: false, //是否显示列配置
      scanCode: '',
      selectedRows:[], //选中的数据
      newData: {}, // 新增供应商数据
      // 主表格配置
      TableConfig: {
        // 表头数据
        columnData: {
          isCheck: {
            isShow: this.isEdit ? false : true,
            isCheckHead:'true',
            showType: 'checkH',
            cellWidth: '60px',
            morenName: '选择',
            zidingyiName: '',
            noModify: true,
            morenState: true,
            zidingyiState: true,
            props: 'isCheck',
          },
          idx: {
            isShow: true,
            cellWidth: '70px',
            morenName: '序号',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            noModify: true,
            props: 'idx',
          },
          companyName: {
            isShow: true,
            showLength: true,
            isRequired: true,
            showType: 'table',
            cellWidth: '150px',
            morenName: '往来单位名称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            noModify: true,
            props: 'companyName',
          },
          companyNumber: {
            isShow: true, //是否显示当前列
            cellWidth: '120px',
            morenName: '往来单位编码',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'companyNumber',
          },
          outerGoodsName: {
            isShow: true,
            isRequired: true,
            showType: 'input',
            cellWidth: '150px',
            morenName: '外部商品名称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            noModify: true,
            props: 'outerGoodsName',
          },
          outerGoodsNumber: {
            isShow: true, //是否显示当前列
            showType: 'input',
            cellWidth: '120px',
            morenName: '外部商品编码',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'outerGoodsNumber',
          },
          outerGoodsUnit: {
            isShow: true,
            showType: 'input',
            cellWidth: '120px',
            morenName: '外部单位',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'outerGoodsUnit',
          },
          outerGoodsSpecs: {
            isShow: true,
            showType: 'input',
            cellWidth: '120px',
            morenName: '外部商品规格',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'outerGoodsSpecs',
          },
          goodsName: {
            isShow: true,
            isRequired: true,
            showType: 'table',
            cellWidth: '150px',
            morenName: '商品名称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            noModify: true,
            props: 'goodsName',
          },
          goodsNumber: {
            isShow: true, //是否显示当前列
            cellWidth: '120px',
            morenName: '商品编码',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'goodsNumber',
          },
          goodsUnit: {
            isShow: true,
            showType: 'selectDw',
            cellWidth: '120px',
            morenName: '商品单位',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'goodsUnit',
          },
          goodsSpecs: {
            isShow: true,
            cellWidth: '120px',
            morenName: '商品规格',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            props: 'goodsSpecs',
          },
        },
        // 表格数据
        tableData: [],
      },
      defaultColumnData: [], // 默认列配置
      columnKey: '客户物料编码新增', // 列配置的标识key
      pageSize: 1, // 每页条数
      pageNo: 0, // 触发上一单/下一单的状态
      orderTotal: -1, //总页码
      updateId: '', // 修改列配置时返回的id
      deleteList: [], // 编辑单据删除商品数据
      insertList: [], // 编辑单据增加商品数据
      updateList: [], // 编辑单据修改商品数据
      infoList: [], // 单据原有的商品数据
      isEdit: false, // 是否可以编辑
      upperLoading: false, // 上一单加载进度
      lowerLoading: false, // 下一单加载进度
      inventoryData: {}, // 盘点数据
      inventoryDataArr: [], // 未盘数据
      allData: [], // 所有数据
      notTurned: false, // 未盘商品开关
      url: {
        api: '客户物料编码新增',
        exportXlsUrl: '/xghCheckOrder/xghCheckOrder/exportXls',
      }, // 导出地址
    }
  },
  methods: {
    // 列宽发生变化时触发
    onDragColumn(val) {
      this.$setColumn.editColumn(this.url.api, this.TableConfig.columnData, this.updateId)
    },
    handleSelect(val){
      this.selectedRows = val
    },
    reloadData (obj) {
      if(!obj){
        this.isEdit = false
        this.newData.id = ''
        this.TableConfig.tableData = [{}]
        this.selectedRows = []
      }else{
        console.log("编辑obj",obj)
        this.isEdit = true
        this.newData.id = obj.id
        this.TableConfig.tableData = [obj]
        console.log("reloadData",this.TableConfig.tableData)    
      }
    },
    dialogVisibleClose () {
        this.tableData = []
        this.dialogVisible = false
        // 新增：重置表格水平滚动条
        if (this.$refs.newTableRef && this.$refs.newTableRef.$el) {
          const tableDiv = this.$refs.newTableRef.$el
          // console.log("tableDiv",tableDiv)
          if (tableDiv) {
            tableDiv.scrollLeft = 0
          }
        }
    },
    // 获取数据
    init() {
      // 初始化列配置数据
      this.defaultColumnData = handleObjectToArray(this.TableConfig.columnData)
      // this.defaultColumnData = handleObjectToArray(this.TableConfig.columnData).filter(item => item.props!== 'isCheck')
      this.selectTitle()
    },
    initData() {
      //初始化数据状态
      this.pageNo = 0
      this.orderTotal = -1
      this.orderFlag = 0
      this.billId = ''
    },
    // 查询保存的列配置
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.columnKey)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.TableConfig.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.columnKey, handleArrayToObject(this.defaultColumnData, 'props'))
        this.updateId = id
        this.TableConfig.columnData = handleArrayToObject(this.defaultColumnData, 'props')
      } else if (obj.code === 404) {
        this.TableConfig.columnData = handleArrayToObject(this.defaultColumnData, 'props')
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.TableConfig.columnData = handleArrayToObject(value, 'props')
      let res = await this.$setColumn.editColumn(this.columnKey, this.TableConfig.columnData, this.updateId)
      if (res.code == 200) {
        this.showTips(res.message, 0)
      } else {
        this.showTips(res.message, 2)
      }
      // this.setPlusOrMinusPrice()
    },
    // 选中点删除
    onNewOrder() {
      this.$refs.newTableRef.getSelectedRows();
      console.log("执行删除操作后的表格数据：", this.TableConfig.tableData);
    },
    // 批量删除
    showDeleteTip(isRow,index) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '确定要删除此信息吗?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.isRow = isRow
        this.isRowIndex = String(index)
        this.$refs.reminderRef.dialogVisible = true
    },
    // 提醒弹框取消后操作
    onCancel(mark) {
    },
    // 弹框确认
    async onYes () {
      if(this.isRow){
        this.$refs.newTableRef.deleteOneRow(this.isRowIndex);
      }else{
        this.$refs.newTableRef.delFun();
      }
    },
    // 保存
    async onSubmit() {
      console.log("是不是编辑",this.TableConfig.tableData)
      if (this.dataLoading) {
        this.showTips('请勿重复提交！')
        return
      }
      // 如果商品中有名称为空的商品，则不能保存
      const length = this.TableConfig.tableData.length
      // if (length == 0) {
      //   this.showTips('商品不能为空，请选择商品！')
      //   return
      // }
      for (let i = 0; i < length; i++) {
        const element = this.TableConfig.tableData[i]
        if (!element.companyName) {
          this.showTips(`往来单位名称不能为空`)
          return
        }else if(!element.outerGoodsName){
          this.showTips(`外部商品名称不能为空`)
          return    
        }else if(!element.goodsName){
          this.showTips(`商品名称不能为空`)
          return    
        }
      }
      // 修改
      if (this.TableConfig.tableData[0].id) {
        // 先判断用户是否拥有修改权限
        if (this.buttonsPermissions.XiuGai) {
          let obj = {
            ...this.TableConfig.tableData
          }
          // this.setDataLoading()
          // res = await putAction('/xghCustomerMaterialCode/xghCustomerMaterialCode/edit', obj)
          putAction('/xghCustomerMaterialCode/xghCustomerMaterialCode/edit', ...this.TableConfig.tableData).then((res) => {
              this.submitLoading = false
              if (res.code === 200) {
                this.$elMessage.success('修改成功');
                this.tableData = []
                this.dialogVisible = false
                this.$emit('queryClick')
              } else {
                this.$elMessage({
                  showClose: true,
                  message: res.message,
                  type: 'error',
                  iconClass: 'el-icon-warning-outline',
                  duration: 3000,
                })
              }
            })
          this.onEditClear()
        } else {
          this.showTips('没有修改权限！')
          return
        }
      } else {
        postAction(`/xghCustomerMaterialCode/xghCustomerMaterialCode/addBatch`, {materialCodes:this.TableConfig.tableData,accountBookId:this.accountBookId}).then((res) => {
              this.submitLoading = false
              if (res.code === 200) {
                this.$elMessage.success(res.message);
                this.tableData = []
                this.dialogVisible = false
                this.$emit('queryClick')
              } else {
                this.$elMessage({
                  showClose: true,
                  message: res.message,
                  type: 'error',
                  iconClass: 'el-icon-warning-outline',
                  duration: 3000,
                })
              }
            })
      }
    },
    // 打开列配置弹框
    onShowColumn() {
      this.$refs.setColumnRef.dialogVisible = true
    },
    onCheckStorehouse(index) {
      this.$refs.newTableRef.onShowCommodity(index)
    },
    /**
     * 父组件处理子组件获取到的往来单位信息数据字段名不统一问题
     * @param tableData 子组件中表格的数据
     * @param index 当前选中this.TableConfig.tableData的索引
     * @param val 从往来单位表中选中的数据
     */
    onHandleWlData(tableData, index, val) {
      this.TableConfig.tableData[index].companyName = val.companyName
      this.TableConfig.tableData[index].companyId = val.id
      this.TableConfig.tableData[index].companyNumber = val.companyNumber
      // this.$refs.newTableRef.changeUnit(index, this.TableConfig.tableData[index])
    },
    /**
     * 父组件处理子组件获取到的商品信息数据字段名不统一问题
     * @param tableData 子组件中表格的数据
     * @param index 当前选中this.TableConfig.tableData的索引
     * @param val 从商品表中选中的商品数据
     */
    onHandleSpData(tableData, index, val) {
      this.TableConfig.tableData[index].goodsNumber = val.goodsNumber
      this.TableConfig.tableData[index].goodsCode = val.barCode
      this.TableConfig.tableData[index].goodsId = val.id
      this.TableConfig.tableData[index].goodsName = val.goodsName
      this.TableConfig.tableData[index].norms = val.specs
      this.TableConfig.tableData[index].unit = val.defaultUnit
      this.TableConfig.tableData[index].goodsManyNorms = val.goodsManyNorms
      this.TableConfig.tableData[index].basicUnit = getBasicUnitId(val.goodsManyNorms)
      this.TableConfig.tableData[index].number = 0
      this.TableConfig.tableData[index].remark = val.goodsRemark
      // this.TableConfig.tableData[index].xghStorehouseId = this.queryData.xghStorehouseId
      this.TableConfig.tableData[index].costPrice = formatFour(val.costPrice)
      this.TableConfig.tableData[index].costPriceShow = formatPrice(val.costPrice)
      this.TableConfig.tableData[index].goodsTypeId = val.xghGoodsTypeId
      this.TableConfig.tableData[index].inventoryId = new Date().getTime()
      this.$refs.newTableRef.changeUnit(index, this.TableConfig.tableData[index])
    },
    /**
     * 父组件处理子组件获取到的商品单位/价格相关数据
     * @param val 当前选中的单位的值
     * @param index 当前选中this.TableConfig.tableData的索引
     */
    onHandleUnit(val, index) {},
    /**
     * 获取合计列总金额
     * @param value 合计列总金额值
     */
    onHandleAllPrice(value) {},
    // 处理请求到的数据
    handleData(res) {
      // 获取订单状态 盘点单有个判断是否生成盈亏单的操作
      // 如果订单列表里的损益数量不全为0，损益列表不为空，才能进入最终确认
      // 如果订单列表里的损益数量全是0，损益列表应该为空，也可以进入最终确认
      let nozeroList = res.orderInfoList.filter(item => item.plusOrMinusNumber != 0) || []
      if (res.billOrderStatus == 1 && nozeroList.length > 0 && res.plusOrMinusList && res.plusOrMinusList.length > 0) {
        this.orderState = 3
      } else if (res.billOrderStatus == 1 && nozeroList.length == 0) {
        this.orderState = 3
      } else {
        this.orderState = Number(res.billOrderStatus)
      }
      this.onEditClear()
      // 给id赋值
      // this.logData.orderId = res.id
      this.billId = res.id
      // 给筛选项清空后重新赋值
      // this.queryData = this.$options.data.call(this).queryData
      // 处理筛选条件的数据
      // for (const key in this.queryData) {
      //   for (const k in res) {
      //     if (key === k) {
      //       this.queryData[key] = res[k]
      //       if (key == 'isReplacementOrder') {
      //         this.queryData.isSupplement = parseFloat(res[key]) == 0 ? true : false
      //       }
      //     }
      //   }
      // }
      // this.storehouseId = this.queryData.xghStorehouseId
      this.notTurned = false
      this.getByGoods()
      // 设置数据
      if (res.orderInfoList && res.orderInfoList.length > 0) {
        res.orderInfoList.forEach((item) => {
          item.inventoryId = new Date().getTime()
        })
        // 记录原始商品数据
        this.infoList = cloneObject(res.orderInfoList)
        const tableData = res.orderInfoList
        // 金额转换
        tableData.forEach((item) => {
          item.costPriceShow = formatPrice(item.costPrice)
          item.priceShow = formatMoney(item.price)
          item.numberShow = formatNumber(item.number)
          item.plusOrMinusNumberShow = formatNumber(item.plusOrMinusNumber)
          item.plusOrMinusPriceShow = formatMoney(item.plusOrMinusPrice)
          item.preNumberShow = formatNumber(item.preNumber)
          item.costPrice = formatFour(item.costPrice)
          item.price = formatFour(item.price)
          item.number = formatFour(item.number)
          item.plusOrMinusNumber = formatFour(item.plusOrMinusNumber)
          item.plusOrMinusPrice = formatFour(item.plusOrMinusPrice)
          item.preNumber = formatFour(item.preNumber)
        })
        // 增加字段数据，避免不能更新页面
        this.TableConfig.tableData = cloneObject(tableData)
      } else {
        this.infoList = []
        this.TableConfig.tableData = []
        // this.$refs.newTableRef.getSubData()
      }
      if (this.orderState == 0) {
        this.$refs.newTableRef.getManyNorms()
      }
      // this.printData = {
      //   ...this.queryData,
      //   orderNumber: this.queryData.serialNumber,
      //   xghStorehouseId_dictText: res.xghStorehouseId_dictText,
      //   sysUserId_dictText: res.sysUserId_dictText,
      //   printExclusive: this.TableConfig.tableData,
      // }
      // 保存原数据
      let data = JSON.parse(JSON.stringify(this.TableConfig.tableData))
      data.forEach((item) => {
        delete item['status']
        delete item['sumNumber']
        delete item['preNumber']
      })
      // this.saveData = JSON.parse(
      //   JSON.stringify({
      //     ...this.queryData,
      //     ...data,
      //   })
      // )
    },
    // 打开选择商品弹出框 关闭商品历史记录弹出表
    onShowGoods() {
      this.$refs.popoverRef[0].doClose()
      this.$refs.commodityRef.dialogVisible = true
    },
    // 打开操作日志弹框
    onShowLog() {
      // this.$refs.operationLogRef.getData(this.logData)
      this.logTitle = '单据操作日志'
      this.$refs.operationLogRef.dialogVisible = true
    },
    // 清除数据
    onEditClear() {
      this.allData = []
      this.inventoryDataArr = []
      this.insertList = []
      this.deleteList = []
      this.updateList = []
    },
    showTips(msg, type = 1) {
      switch (type) {
        case 0:
          this.$elMessage.success(msg)
          break
        case 1:
          this.$elMessage.warning(msg)
          break
        case 2:
          this.$elMessage.error(msg)
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .info_content_div{
  justify-content: center;
    .div_table{
      flex:0
    }
} 
::v-deep .del_btn{
  padding: 0 20px !important;
}
::v-deep .el-dialog__body{
  padding: 20px;
}
::v-deep .table_div{
  height: 60vh;
}
.basic_info {
  width: 100%;
  // height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: PingFang SC;
  font-size: 12px;
  ::v-deep .el-button {
    // width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 0.093756rem;
    border: none;
    margin-right: 0.1rem;
    margin-left: 0;
    padding: 9px 0.2rem;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    height: 30px;
    box-sizing: border-box;
    margin-right: 0.1rem;

    .el-input {
      height: 100%;

      .el-input__inner {
        width: 70px;
        height: 100%;
        border: none;
        font-size: 12px;
      }

      .el-input__suffix {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .el-textarea {
        height: 100%;
        width: 30px;
      }
    }
  }

  ::v-deep .el-checkbox {
    display: flex;
    align-items: center;
    margin-left: 10px;

    .el-checkbox__input {
      height: 19px;
      display: flex;
      align-items: center;
    }

    .el-checkbox__label {
      font-size: 12px;
      padding-left: 5px;
      color: #666;
    }

    .is-checked {
      .el-checkbox__inner {
        background: #1a93fa;
        border-color: #1a93fa;
      }
    }
  }

  .arrow_btn {
    width: 30px;
    height: 30px;
    background: #ffffff;
    padding: 0;
    margin-right: 0;
  }

  p {
    font-size: 12px;
    color: #666;
    margin-right: 0.25rem;
  }

  .search_order {
    display: flex;
    align-items: center;
    margin-left: 10px;

    p {
      margin-right: 0;
    }

    ::v-deep .el-input {
      width: 148px;
      height: 30px;

      .el-input__inner {
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        font-size: 12px;
        background-color: #ffffff;
        border: none;
        color: #666666;
      }
    }
  }

  .btn_left {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 1rem);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .div_screen {
      width: 100%;
      // heig ht: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-select {
        height: 30px;
        box-sizing: border-box;
        margin-right: 10px;

        .el-input {
          height: 100%;

          .el-input__inner {
            height: 100%;
            font-size: 12px;
          }

          .el-input__suffix {
            height: 100%;
            display: flex;
            align-items: center;
          }

          .el-textarea {
            height: 100%;
            width: 30px;
          }
        }
      }

      ::v-deep .el-date-editor {
        width: 157px;
        height: 30px;

        .el-input__inner {
          width: 100%;
          height: 30px;
          padding: 0 0.187512rem;
          font-size: 12px;
          color: #666;
        }

        .el-input__prefix {
          left: unset;
          right: 5px !important;

          .el-input__icon {
            line-height: 30px;
            font-size: 16px;
          }
        }

        .el-input__suffix {
          display: none;
        }
      }

      .screen_right {
        width: 30px;
        height: 30px;
        margin-top: 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;

        .set_up {
          line-height: 20px;
          font-size: 20px;
          color: rgb(153, 153, 153);
        }
      }
    }

    .table_content {
      flex: 1;
      margin-top: 10px;
      box-sizing: border-box;
      overflow: auto;

      > div {
        width: 100%;
        height: 100%;
        border: 1px solid #e3e3e3;
      }
    }

    .table_calculation {
      width: 100%;
      // height: 3.187699rem;
      height: 50px;
      box-sizing: border-box;
      // padding: 0.187512rem 0;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;

      > div {
        // height: 0.55rem;
        height: 30px;
        margin-bottom: 0.187512rem;
        margin-right: 20px;
        display: flex;
        align-items: center;

        ::v-deep .el-button {
          width: 80px;
          height: 30px;
          display: flex;
          margin-left: 12px;
          align-items: center;
          justify-content: center;
          // font-size: 0.225014rem;
          font-size: 12px;
          color: #666;
          background: #fff;
        }

        > p,
        span {
          margin: 0;
          // font-size: 0.225014rem;
          font-size: 12px;
          color: #666;
        }

        .table_cal_p {
          width: 0.8rem;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        > ::v-deep .el-input {
          height: 30px;

          .el-input__inner {
            height: 100%;
            padding: 0 0.150009rem;
            // font-size: 0.225014rem;
            font-size: 12px;
            color: #666;
          }
        }
        .table_p_date {
          margin-left: 12px;
        }
        &:last-child {
          margin-bottom: 0;
          margin-right: 0;
        }
      }

      .bill_mask_back_view {
        flex: 1;
      }
    }
  }
}

.scan_div {
  width: 100%;
  position: relative;
}

.scan_popover {
  position: fixed;
  top: 3.000188rem;
  left: 6rem;
  z-index: 1;
  padding: 0.112507rem;
  background: #fff;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  display: none;

  .close_scan {
    position: absolute;
    top: -0.187512rem;
    left: 4.950309rem;
    font-size: 0.337521rem;
    cursor: pointer;
    color: #666;
  }

  ::v-deep .el-input {
    width: 3.375211rem;
    // height: 0.562535rem;
    height: 0.55rem;

    .el-input__inner {
      width: 100%;
      height: 100%;
      border-color: #1893fc;
      border-radius: 0;
      padding: 0 0.112507rem;
    }
  }

  p {
    width: 1.500094rem;
    // height: 0.562535rem;
    height: 0.55rem;
    background: #1893fc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    // font-size: 0.225014rem;
    font-size: 12px;
    margin: 0;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}

.table_popover {
  .el-table {
    border: 1px solid #e3e3e3;
    box-sizing: border-box;

    th,
    td {
      padding: 0;
      color: #666;
      box-sizing: border-box;
      border-right: 1px solid #e3e3e3;

      .cell {
        // height: 0.562535rem;
        height: 0.55rem;
        display: flex;
        align-items: center;
        // font-size: 0.225014rem;
        font-size: 12px;
      }

      &:first-child {
        .cell {
          justify-content: center;
        }
      }

      &:last-child {
        border-right: none;
      }
    }

    th {
      .cell {
        background: #ededed;
        justify-content: center;
      }
    }

    .el-table__body tr:hover > td {
      background: #e3f6ff;
    }

    .el-table__footer-wrapper {
      td {
        background: #f4f4f4;
        border: none;
      }
    }
  }

  .new_table_style {
    // height: 0.562535rem;
    height: 0.55rem;
    border: 1px solid #e3e3e3;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ededed;
  }
}

//
//-------自定义-------
//
.custom_star {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.star {
  color: red;
  // position: absolute;
  // margin-left: -10px;
}

.bottom_item {
  margin: 30px 0;
  width: 100%;
  text-align: center;
}

.custom_select_head {
  // right: 10px;
  width: 150px;
  height: 100%;
  position: relative;
}
.custom_select_head_time {
  width: 100%;
  height: 100%;
  position: relative;
}
.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.cus_div {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.custom_left {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.custom_item {
  display: flex;
  align-items: center;
  height: 30px;
  margin: 15px 13px 0px 0px;

  .custom_inventory {
    margin-right: 15px;
  }
}
</style>
